React Suspense ๋ฐ Error Boundaries: ๋ก๋ฉ ๋ฐ ์ค๋ฅ ์ฒ๋ฆฌ์ ๋ํ ์ข
ํฉ ๊ฐ์ด๋ | MLOG | MLOG 2025๋
9์ 8์ผ ํ๊ตญ์ด
React Suspense ๋ฐ Error Boundaries๋ฅผ ๋ง์คํฐํ์ฌ ๊ฐ๋ ฅํ ๋ก๋ฉ ์ํ ๋ฐ ์ค๋ฅ ์ฒ๋ฆฌ๋ฅผ ๊ตฌํํ์ธ์. ํ๋ ฅ์ ์ธ React ์ ํ๋ฆฌ์ผ์ด์
๊ตฌ์ถ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก, ํตํฉ ๊ธฐ์ , ๊ณ ๊ธ ์ ๋ต์ ์์๋ณด์ธ์.
React Suspense ๋ฐ Error Boundaries: ๋ก๋ฉ ๋ฐ ์ค๋ฅ ์ฒ๋ฆฌ์ ๋ํ ์ข
ํฉ ๊ฐ์ด๋
ํ๋ ์น ๊ฐ๋ฐ์์ ๋ถ๋๋ฝ๊ณ ํ๋ ฅ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ฒ์ด ๊ฐ์ฅ ์ค์ํฉ๋๋ค. ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๊ตฌ์ถ์ ์ํ ์ ๋์ ์ธ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ React๋ ๋ก๋ฉ ์ํ ๋ฐ ์ค๋ฅ ์ฒ๋ฆฌ๋ฅผ ์ํ ๊ฐ๋ ฅํ ๋ฉ์ปค๋์ฆ์ธ Suspense ์ Error Boundaries ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด ์ข
ํฉ ๊ฐ์ด๋๋ ์ด๋ฌํ ๊ธฐ๋ฅ์ ํจ๊ณผ์ ์ผ๋ก ํตํฉํ์ฌ ๊ฐ๋ ฅํ๊ณ ์ฌ์ฉ์ ์นํ์ ์ธ React ์ ํ๋ฆฌ์ผ์ด์
์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์ดํด๋ด
๋๋ค.
React Suspense ์ดํด
React Suspense ๋ ์ปดํฌ๋ํธ์์ ๋น๋๊ธฐ ์์
์ ์ฒ๋ฆฌํ๋ ์ ์ธ์ ์ธ ๋ฐฉ๋ฒ์
๋๋ค. ๋ฐ์ดํฐ ๋ก๋๋ฅผ ๊ธฐ๋ค๋ฆฌ๋ ๋์ UI์ ์ผ๋ถ ๋ ๋๋ง์ "์ผ์ ์ค๋จ"ํ ์ ์์ต๋๋ค. ์ด๋ ๊ธฐ์กด์ ๋ช
๋ น์ ๋ก๋ฉ ์ํ ๊ด๋ฆฌ๋ณด๋ค ๋ ๊น๋ํ๊ณ ์์ธก ๊ฐ๋ฅํ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํฉ๋๋ค.
Suspense ์๋ ๋ฐฉ์
Suspense๋ Promise ๋ฅผ ๋์ ธ ๋ ๋๋ง์ "์ผ์ ์ค๋จ"ํ๋ ์ปดํฌ๋ํธ์ ๊ธฐ๋ฅ์ ์ฌ์ฉํฉ๋๋ค. ์ปดํฌ๋ํธ๊ฐ Promise๋ฅผ ๋์ง๋ฉด React๋ ์ด๋ฅผ ์ก์ UI ์
๋ฐ์ดํธ๋ฅผ ์ผ์ ์ค๋จํฉ๋๋ค. Promise๊ฐ ์๋ฃ๋๋ฉด React๋ ์๋ฃ๋ ๋ฐ์ดํฐ๋ก ์ปดํฌ๋ํธ ๋ ๋๋ง์ ์ฌ๊ฐํฉ๋๋ค.
Suspense๋ฅผ ํ์ฉํ๋ ค๋ฉด ์ผ๋ฐ์ ์ผ๋ก ๋ค์๊ณผ ๊ฐ์ Suspense์ ํจ๊ป ์๋ํ๋๋ก ์ค๊ณ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํจ๊ป ์ฌ์ฉํฉ๋๋ค.
React.lazy: ์ฝ๋ ๋ถํ ๋ฐ ์ง์ฐ ๋ก๋ฉ ์ปดํฌ๋ํธ์ฉ.
๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ: ๋ง์ ์ต์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ(์: Relay, Apollo Client ๋ฐ SWR์ ์คํ์ ๋ฒ์ )๋ Suspense์ ์ํํ๊ฒ ํตํฉ๋๋๋ก ๊ตฌ์ถ๋์์ต๋๋ค.
์์ : ๊ธฐ๋ณธ Suspense ๊ตฌํ
React.lazy๋ฅผ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ๋ฅผ ์ง์ฐ ๋ก๋ฉํ๋ ๊ธฐ๋ณธ Suspense ๊ตฌํ์ ์ค๋ช
ํ๊ฒ ์ต๋๋ค.
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
Loading... }>
);
}
export default App;
Copy
์ด ์์ ์์:
React.lazy๋ MyComponent๋ฅผ ์ง์ฐ ๋ก๋ฉํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
Suspense๋ LazyComponent๋ฅผ ๋ํํฉ๋๋ค.
fallback prop์ MyComponent๊ฐ ๋ก๋๋๋ ๋์ ํ์๋๋ ๋์ฒด UI(๋ก๋ฉ ํ์๊ธฐ)๋ฅผ ์ ๊ณตํฉ๋๋ค.
Error Boundaries ๊ตฌํ
Suspense๊ฐ ๋ก๋ฉ ์ํ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐ๋ฉด, Error Boundaries ๋ ํ์ ์ปดํฌ๋ํธ ํธ๋ฆฌ์์ JavaScript ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ๊ณ ํด๋น ์ค๋ฅ๋ฅผ ๊ธฐ๋กํ๋ฉฐ ์ ์ฒด ์ปดํฌ๋ํธ ํธ๋ฆฌ๋ฅผ ์ถฉ๋์ํค๋ ๋์ ๋์ฒด UI๋ฅผ ํ์ํ๋ React ์ปดํฌ๋ํธ์
๋๋ค.
Error Boundaries ์๋ ๋ฐฉ์
Error Boundaries๋ ๋ค์๊ณผ ๊ฐ์ ๋ผ์ดํ์ฌ์ดํด ๋ฉ์๋๋ฅผ ์ ์ํ๋ ํด๋์ค ์ปดํฌ๋ํธ์
๋๋ค.
static getDerivedStateFromError(error): ์ด ๋ฉ์๋๋ ํ์ ์ปดํฌ๋ํธ์์ ์ค๋ฅ๊ฐ ๋ฐ์ํ ํ ํธ์ถ๋ฉ๋๋ค. ๋ฐ์ํ ์ค๋ฅ๋ฅผ ์ธ์๋ก ๋ฐ๊ณ ์ํ๋ฅผ ์
๋ฐ์ดํธํ ๊ฐ์ ๋ฐํํด์ผ ํฉ๋๋ค.
componentDidCatch(error, info): ์ด ๋ฉ์๋๋ ํ์ ์ปดํฌ๋ํธ์์ ์ค๋ฅ๊ฐ ๋ฐ์ํ ํ ํธ์ถ๋ฉ๋๋ค. ์ค๋ฅ์ ์ค๋ฅ๋ฅผ ๋ฐ์์ํจ ์ปดํฌ๋ํธ์ ๋ํ ์ ๋ณด๊ฐ ํฌํจ๋ info ๊ฐ์ฒด๋ฅผ ๋ฐ์ต๋๋ค. ์ด๊ฒ์ Sentry ๋๋ Bugsnag์ ๊ฐ์ ์๋น์ค์ ์ค๋ฅ๋ฅผ ๊ธฐ๋กํ๋ ๋ฐ ์ด์์ ์ธ ์ฅ์์
๋๋ค.
์ค์: Error Boundaries๋ ํธ๋ฆฌ์์ ์๋์ ์๋ ์ปดํฌ๋ํธ์ ์ค๋ฅ๋ง ํฌ์ฐฉํฉ๋๋ค. Error Boundary๋ ์์ฒด ๋ด์์ ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ ์ ์์ต๋๋ค .
์์ : ๊ธฐ๋ณธ Error Boundary ๊ตฌํ
import React, { Component } from 'react';
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = {
hasError: false
};
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return {
hasError: true
};
}
componentDidCatch(error, info) {
// You can also log the error to an error reporting service
console.error('Caught error: ', error, info);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return Something went wrong. ;
}
return this.props.children;
}
}
export default ErrorBoundary;
Copy
Error Boundary๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ์ค๋ฅ๊ฐ ๋ฐ์ํ ์ ์๋ ์ปดํฌ๋ํธ๋ฅผ ๋ํํ์ญ์์ค.
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';
function App() {
return (
);
}
export default App;
Copy
Suspense ๋ฐ Error Boundaries ํตํฉ
์ง์ ํ ํ์ Suspense์ Error Boundaries๋ฅผ ๊ฒฐํฉํ๋ ๋ฐ์ ๋์ต๋๋ค. ์ด๋ฅผ ํตํด ์ ํ๋ฆฌ์ผ์ด์
๋ด์์ ๋ก๋ฉ ์ํ์ ์ค๋ฅ๋ฅผ ๋ชจ๋ ์ ์์ ์ผ๋ก ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. ๊ถ์ฅ๋๋ ๋ฐฉ๋ฒ์ Suspense๋ฅผ Error Boundary๋ก ๋ํํ๋ ๊ฒ์
๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ง์ฐ ๋ก๋๋๋ ์ปดํฌ๋ํธ๊ฐ ๋ก๋์ ์คํจํ๋ ๊ฒฝ์ฐ(์: ๋คํธ์ํฌ ์ค๋ฅ) Error Boundary๊ฐ ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ๊ณ ์ฌ์ฉ์์๊ฒ ์ ์ฉํ ๋ฉ์์ง๋ฅผ ํ์ํ ์ ์์ต๋๋ค.
์์ : Suspense์ Error Boundaries ๊ฒฐํฉ
import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';
const LazyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
Loading... }>
);
}
export default App;
Copy
์ด ์์ ์์:
ErrorBoundary๋ ์ ์ฒด Suspense ์ปดํฌ๋ํธ๋ฅผ ๋ํํฉ๋๋ค.
LazyComponent๊ฐ ๋ก๋์ ์คํจํ๋ ๊ฒฝ์ฐ(์: ๋คํธ์ํฌ ์ค๋ฅ ๋๋ ์์๋ ๊ฐ์ ธ์ค๊ธฐ๋ก ์ธํด) ErrorBoundary๋ ์ค๋ฅ๋ฅผ ํฌ์ฐฉํ๊ณ ๋์ฒด UI๋ฅผ ํ์ํฉ๋๋ค.
LazyComponent๊ฐ ์ฑ๊ณต์ ์ผ๋ก ๋ก๋๋์์ง๋ง ๋ ๋๋ง ์ค์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ ๊ฒฝ์ฐ ErrorBoundary๋ ํด๋น ์ค๋ฅ๋ฅผ ํฌ์ฐฉํฉ๋๋ค.
๊ณ ๊ธ ์ ๋ต ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก
1. ์ธ๋ถํ๋ Error Boundaries
์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์
์ ๋จ์ผ Error Boundary๋ก ๋ํํ๋ ๋์ ๋ ์๊ณ ์ธ๋ถํ๋ Error Boundaries๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข์ต๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๋จ์ผ ์ค๋ฅ๋ก ์ธํด ์ ์ฒด UI๊ฐ ์ถฉ๋ํ๋ ๊ฒ์ ๋ฐฉ์งํ๊ณ ์ค๋ฅ๋ฅผ ๋ณด๋ค ํจ๊ณผ์ ์ผ๋ก ๊ฒฉ๋ฆฌํ๊ณ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด ๋ชฉ๋ก์ ๊ฐ๋ณ ๋ชฉ๋ก ํญ๋ชฉ์ ๋ํํ์ฌ ํ๋์ ์คํจ ํญ๋ชฉ์ด ์ ์ฒด ๋ชฉ๋ก์ ๊นจ์ง ์๋๋ก ํฉ๋๋ค.
2. ์ฌ์ฉ์ ์ ์ ์ค๋ฅ ๋์ฒด
์ผ๋ฐ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ํ์ํ๋ ๋์ ํน์ ์ปดํฌ๋ํธ ๋ฐ ์ค๋ฅ์ ๋ง๊ฒ ์กฐ์ ๋ ์ฌ์ฉ์ ์ ์ ์ค๋ฅ ๋์ฒด ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ์ฌ๊ธฐ์๋ ์ฌ์ฉ์์๊ฒ ์ ์ฉํ ์ ๋ณด๋ฅผ ์ ๊ณตํ๊ฑฐ๋ ๋์ฒด ์์
์ ์ ์ํ๊ฑฐ๋ ์ค๋ฅ์์ ๋ณต๊ตฌ๋ฅผ ์๋ํ๋ ๊ฒ์ด ํฌํจ๋ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ๋งต ์ปดํฌ๋ํธ๊ฐ ๋ก๋์ ์คํจํ๋ฉด ์ฌ์ฉ์์ ์ธํฐ๋ท ์ฐ๊ฒฐ์ ํ์ธํ๊ฑฐ๋ ๋ค๋ฅธ ๋งต ์ ๊ณต์
์ฒด๋ฅผ ์ฌ์ฉํด ๋ณด๋ผ๊ณ ์ ์ํ ์ ์์ต๋๋ค.
3. ์ค๋ฅ ๊ธฐ๋ก
Error Boundaries์์ ํฌ์ฐฉํ ์ค๋ฅ๋ ํญ์ ์ค๋ฅ ๋ณด๊ณ ์๋น์ค(์: Sentry, Bugsnag, Rollbar)์ ๊ธฐ๋กํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ค๋ฅ๋ฅผ ์ถ์ ํ๊ณ ํจํด์ ์๋ณํ๋ฉฐ ๋ ๋ง์ ์ฌ์ฉ์์๊ฒ ์ํฅ์ ๋ฏธ์น๊ธฐ ์ ์ ๋ฌธ์ ๋ฅผ ์ฌ์ ์ ํด๊ฒฐํ ์ ์์ต๋๋ค. ์ค๋ฅ ๋ก๊ทธ์ ์ฌ์ฉ์ ์ปจํ
์คํธ(์: ์ฌ์ฉ์ ID, ๋ธ๋ผ์ฐ์ ๋ฒ์ , ์์น)๋ฅผ ํฌํจํ์ฌ ๋๋ฒ๊น
์ ์ง์ํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
4. ์๋ฒ ์ธก ๋ ๋๋ง(SSR) ๊ณ ๋ ค ์ฌํญ
์๋ฒ ์ธก ๋ ๋๋ง๊ณผ ํจ๊ป Suspense ๋ฐ Error Boundaries๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ Suspense๋ ์์ง SSR์ ์์ ํ ์ง์ํ์ง ์๋๋ค๋ ์ ์ ์ ์ํ์ญ์์ค. ๊ทธ๋ฌ๋ loadable-components ๋๋ React 18 ์คํธ๋ฆฌ๋ฐ SSR๊ณผ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ฌํ ๊ฒฐ๊ณผ๋ฅผ ์ป์ ์ ์์ต๋๋ค. Error Boundaries๋ ํด๋ผ์ด์ธํธ ์ธก ๋ฐ ์๋ฒ ์ธก ํ๊ฒฝ ๋ชจ๋์์ ์ผ๊ด๋๊ฒ ์๋ํฉ๋๋ค.
5. ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ์ ๋ต
Suspense์ ์ ํตํฉ๋๋ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ ํํ์ญ์์ค. ์ธ๊ธฐ ์๋ ์ต์
์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
Relay: Suspense์ ์ํํ๊ฒ ์๋ํ๋๋ก ์ค๊ณ๋ React ์ ํ๋ฆฌ์ผ์ด์
๊ตฌ์ถ์ ์ํ ๋ฐ์ดํฐ ๊ธฐ๋ฐ ํ๋ ์์ํฌ์
๋๋ค.
SWR: Suspense์ ๋ํ ๊ธฐ๋ณธ ์ ๊ณต ์ง์์ ์ ๊ณตํ๋ ์๊ฒฉ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ๋ฅผ ์ํ React Hooks ๋ผ์ด๋ธ๋ฌ๋ฆฌ์
๋๋ค.
Apollo Client(์คํ์ ): ์ธ๊ธฐ ์๋ GraphQL ํด๋ผ์ด์ธํธ๋ ์คํ์ ๋ฒ์ ์์ Suspense์ ๋ํ ์ง์์ ์ถ๊ฐํ๊ณ ์์ต๋๋ค.
์ด๋ฌํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด Suspense๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๋ฐ ๋ก๋ฉ ์ํ๋ฅผ ์ ์ธ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์์ผ๋ฏ๋ก ๋ ๊น๋ํ๊ณ ์ ์ง ๊ด๋ฆฌํ๊ธฐ ์ฌ์ด ์ฝ๋๊ฐ ๋ฉ๋๋ค.
6. Suspense ๋ฐ Error Boundaries ํ
์คํธ
๋ก๋ฉ ์ํ ๋ฐ ์ค๋ฅ๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌํ๋์ง ํ์ธํ๊ธฐ ์ํด Suspense ๋ฐ Error Boundary ๊ตฌํ์ ์ฒ ์ ํ ํ
์คํธํฉ๋๋ค. Jest ๋ฐ React Testing Library์ ๊ฐ์ ํ
์คํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ก๋ฉ ์ง์ฐ, ๋คํธ์ํฌ ์ค๋ฅ ๋ฐ ์ปดํฌ๋ํธ ์ค๋ฅ๋ฅผ ์๋ฎฌ๋ ์ด์
ํฉ๋๋ค.
7. ์ ๊ทผ์ฑ ๊ณ ๋ ค ์ฌํญ
๋ก๋ฉ ํ์๊ธฐ ๋ฐ ์ค๋ฅ ๋ฉ์์ง๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๊ฐ ์ก์ธ์คํ ์ ์๋์ง ํ์ธํฉ๋๋ค. ๋ก๋ฉ ์ ๋๋ฉ์ด์
๋ฐ ์ค๋ฅ ์์ด์ฝ์ ๋ํ ๋ช
ํํ๊ณ ๊ฐ๊ฒฐํ ํ
์คํธ ๋์์ ์ ๊ณตํฉ๋๋ค. ARIA ์์ฑ์ ์ฌ์ฉํ์ฌ ๋ก๋ฉ ์ํ ๋ฐ ์ค๋ฅ ์กฐ๊ฑด์ ๋ํ๋
๋๋ค.
์ค์ ์์ ๋ฐ ์ฌ์ฉ ์ฌ๋ก
1. ์ ์ ์๊ฑฐ๋ ํ๋ซํผ
์ ์ ์๊ฑฐ๋ ํ๋ซํผ์ Suspense๋ฅผ ์ฌ์ฉํ์ฌ ์ ํ ์ธ๋ถ ์ ๋ณด, ์ด๋ฏธ์ง ๋ฐ ๋ฆฌ๋ทฐ๋ฅผ ์ง์ฐ ๋ก๋ํ ์ ์์ต๋๋ค. Error Boundaries๋ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ, ์ด๋ฏธ์ง ๋ก๋ฉ ๋๋ ์ปดํฌ๋ํธ ๋ ๋๋ง๊ณผ ๊ด๋ จ๋ ์ค๋ฅ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด ์ ํ ์ด๋ฏธ์ง๊ฐ ๋ก๋์ ์คํจํ๋ฉด Error Boundary๋ ์๋ฆฌ ํ์์ ์ด๋ฏธ์ง๋ฅผ ํ์ํ๊ณ ์ค๋ฅ๋ฅผ ๊ธฐ๋กํ ์ ์์ต๋๋ค.
2. ์์
๋ฏธ๋์ด ์ ํ๋ฆฌ์ผ์ด์
์์
๋ฏธ๋์ด ์ ํ๋ฆฌ์ผ์ด์
์ Suspense๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์ ํ๋กํ, ๋ด์ค ํผ๋ ๋ฐ ๋๊ธ์ ์ง์ฐ ๋ก๋ํ ์ ์์ต๋๋ค. Error Boundaries๋ API ์์ฒญ, ๋ฐ์ดํฐ ์ฒ๋ฆฌ ๋๋ ์ปดํฌ๋ํธ ๋ ๋๋ง๊ณผ ๊ด๋ จ๋ ์ค๋ฅ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ฌ์ฉ์ ํ๋กํ์ด ๋ก๋์ ์คํจํ๋ฉด Error Boundary๋ ์ผ๋ฐ ์ฌ์ฉ์ ์์ด์ฝ๊ณผ ํ๋กํ์ ์ฌ์ฉํ ์ ์์์ ๋ํ๋ด๋ ๋ฉ์์ง๋ฅผ ํ์ํ ์ ์์ต๋๋ค.
3. ๋ฐ์ดํฐ ์๊ฐํ ๋์๋ณด๋
๋ฐ์ดํฐ ์๊ฐํ ๋์๋ณด๋๋ Suspense๋ฅผ ์ฌ์ฉํ์ฌ ์ฐจํธ, ๊ทธ๋ํ ๋ฐ ํ
์ด๋ธ์ ์ง์ฐ ๋ก๋ํ ์ ์์ต๋๋ค. Error Boundaries๋ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ, ๋ฐ์ดํฐ ์ฒ๋ฆฌ ๋๋ ์ปดํฌ๋ํธ ๋ ๋๋ง๊ณผ ๊ด๋ จ๋ ์ค๋ฅ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ ํจํ์ง ์์ ๋ฐ์ดํฐ๋ก ์ธํด ์ฐจํธ๊ฐ ๋ ๋๋ง๋์ง ๋ชปํ๋ฉด Error Boundary๋ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ํ์ํ๊ณ ๋ฐ์ดํฐ ์์ค๋ฅผ ํ์ธํ๋ผ๋ ๋ฉ์์ง๋ฅผ ํ์ํ ์ ์์ต๋๋ค.
4. ๊ตญ์ ํ(i18n)
์๋ก ๋ค๋ฅธ ์ธ์ด ๋ฐ ๋ก์ผ์ผ์ ์ฒ๋ฆฌํ ๋ Suspense๋ฅผ ์ฌ์ฉํ์ฌ ์ธ์ด๋ณ ๋ฆฌ์์ค๋ฅผ ์ง์ฐ ๋ก๋ํ ์ ์์ต๋๋ค. ๋ฒ์ญ ํ์ผ์ด ๋ก๋์ ์คํจํ๋ฉด Error Boundary๋ ๊ธฐ๋ณธ ์ธ์ด ๋ฌธ์์ด ๋๋ ๋ฒ์ญ์ ์ฌ์ฉํ ์ ์์์ ๋ํ๋ด๋ ๋ฉ์์ง๋ฅผ ํ์ํ ์ ์์ต๋๋ค. ์ค๋ฅ ์ฒ๋ฆฌ๊ฐ ์ธ์ด์ ๊ตฌ์ ๋ฐ์ง ์๋๋ก ์ค๊ณํ๊ฑฐ๋ ์ง์ญํ๋ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ์ ๊ณตํด์ผ ํฉ๋๋ค.
๊ธ๋ก๋ฒ ๊ด์ : ๋ค์ํ ์ฌ์ฉ์ ์ปจํ
์คํธ์ ์ ์
๊ธ๋ก๋ฒ ๋์์ ์ํ ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถํ ๋๋ ๋ค์ํ ์ฌ์ฉ์ ์ปจํ
์คํธ์ ์ ์ฌ์ ์ธ ์คํจ ์ง์ ์ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์๋ฅผ ๋ค์ด:
๋คํธ์ํฌ ์ฐ๊ฒฐ: ์ผ๋ถ ์ง์ญ์ ์ฌ์ฉ์๋ ์ธํฐ๋ท ์ฐ๊ฒฐ์ด ๋๋ฆฌ๊ฑฐ๋ ์ ๋ขฐ์ฑ์ด ๋จ์ด์ง ์ ์์ต๋๋ค. Suspense๋ฅผ ์ฌ์ฉํ์ฌ ์ฐ๊ฒฐ์ด ๋๋ฆฐ ๊ฒฝ์ฐ์๋ ์ํํ ๋ก๋ฉ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
์ฅ์น ๊ธฐ๋ฅ: ์ฌ์ฉ์๋ ๋ค์ํ ์ฒ๋ฆฌ ๋ฅ๋ ฅ๊ณผ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ๊ฐ์ง ๋ค์ํ ์ฅ์น์์ ์ ํ๋ฆฌ์ผ์ด์
์ ์ก์ธ์คํ ์ ์์ต๋๋ค. ์ฝ๋ ๋ถํ ๋ฐ ์ง์ฐ ๋ก๋ฉ์ ์ฌ์ฉํ์ฌ ์ ๊ฐํ ์ฅ์น์์ ์ฑ๋ฅ์ ์ต์ ํํฉ๋๋ค.
์ธ์ด ๋ฐ ๋ฌธํ: ์ค๋ฅ ๋ฉ์์ง ๋ฐ ๋ก๋ฉ ํ์๊ธฐ๊ฐ ์ง์ญํ๋๊ณ ๋ฌธํ์ ์ผ๋ก ์ ์ ํ์ง ํ์ธํฉ๋๋ค.
์๊ฐ๋: ์๊ฐ๋๊ฐ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๋ฐ ํ์์ ๋ฏธ์น๋ ์ํฅ์ ๊ณ ๋ คํฉ๋๋ค. ๋ค์ํ ๋ก์ผ์ผ์ ์ ํฉํ ๋ ์ง ๋ฐ ์๊ฐ ํ์์ ์ฌ์ฉํฉ๋๋ค.
๊ฒฐ์ ๋ฐฉ๋ฒ: ๋ค์ํ ๊ฒฐ์ ๋ฐฉ๋ฒ๊ณผ ๊ด๋ จ๋ ์ค๋ฅ๋ฅผ ์ ์์ ์ผ๋ก ์ฒ๋ฆฌํฉ๋๋ค. ์ฌ์ฉ์์๊ฒ ๊ฒฐ์ ํ๋ก์ธ์ค๋ฅผ ์๋ดํ๋ ๋ช
ํํ๊ณ ์ ์ฉํ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ์ ๊ณตํฉ๋๋ค.
๊ฒฐ๋ก
React Suspense ๋ฐ Error Boundaries๋ ํ๋ ฅ์ ์ด๊ณ ์ฌ์ฉ์ ์นํ์ ์ธ React ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถํ๋ ๋ฐ ํ์์ ์ธ ๋๊ตฌ์
๋๋ค. ์ด๋ฌํ ๊ธฐ๋ฅ์ ์๋ ๋ฐฉ์์ ์ดํดํ๊ณ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๋ฉด ๋ก๋ฉ ์ํ ๋ฐ ์ค๋ฅ๋ฅผ ์ ์์ ์ผ๋ก ์ฒ๋ฆฌํ์ฌ ์ฌ์ฉ์์๊ฒ ์ํํ ๊ฒฝํ์ ์ ๊ณตํ๋ ์ ํ๋ฆฌ์ผ์ด์
์ ๋ง๋ค ์ ์์ต๋๋ค. ์ด ๊ฐ์ด๋๋ Suspense ๋ฐ Error Boundaries๋ฅผ ํ๋ก์ ํธ์ ํจ๊ณผ์ ์ผ๋ก ํตํฉํ์ฌ ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ๋ ๋ถ๋๋ฝ๊ณ ์์ ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ณด์ฅํ๋ ๋ฐ ํ์ํ ์ง์์ ์ ๊ณตํฉ๋๋ค.